<!DOCTYPE html>
<html>
<head>
<title>Acceleration vs. Time Graph</title>
</head>
<body>

<canvas id="physicsCanvas" width="550" height="350" style="border:1px solid #d3d3d3;"></canvas>

<script>
const canvas = document.getElementById('physicsCanvas');
const ctx = canvas.getContext('2d');

// --- Configuration ---
const ox = 70; // origin x on canvas
const oy = 300; // origin y on canvas
const graphWidth = 450;
const graphHeight = 250;

// Logical units of the graph
const timeMax = 10; // T corresponds to 10 logical time units
const accMax = 10; // Max acceleration is 10 m/s^2
const yAxisTop = 12; // Extend y-axis a bit for visual space (up to logical 12)

// Scaling factors to convert logical units to pixels
const scaleX = graphWidth / timeMax; // pixels per time unit
const scaleY = graphHeight / yAxisTop; // pixels per acceleration unit

// Function to convert graph coordinates to canvas coordinates
function toCanvas(gx, gy) {
    return {
        x: ox + gx * scaleX,
        y: oy - gy * scaleY
    };
}

// --- Drawing ---

// 1. Draw Grid
ctx.beginPath();
ctx.strokeStyle = '#cccccc';
ctx.lineWidth = 1;

// Horizontal grid lines (for every 2 m/s^2)
for (let i = 2; i <= accMax; i += 2) {
    const p1 = toCanvas(0, i);
    const p2 = toCanvas(timeMax, i);
    ctx.moveTo(p1.x, p1.y);
    ctx.lineTo(p2.x, p2.y);
}

// Vertical grid lines (for every 1 time unit)
for (let i = 1; i <= timeMax; i++) {
    const p1 = toCanvas(i, 0);
    const p2 = toCanvas(i, yAxisTop);
    ctx.moveTo(p1.x, p1.y);
    ctx.lineTo(p2.x, p2.y);
}
ctx.stroke();

// 2. Draw Axes
ctx.beginPath();
ctx.strokeStyle = 'black';
ctx.lineWidth = 2;

// X-axis (Time)
const origin = toCanvas(0, 0);
const xAxisEnd = toCanvas(timeMax, 0);
ctx.moveTo(origin.x, origin.y);
ctx.lineTo(xAxisEnd.x, xAxisEnd.y);

// Y-axis (Acceleration)
const yAxisEnd = toCanvas(0, yAxisTop);
ctx.moveTo(origin.x, origin.y);
ctx.lineTo(yAxisEnd.x, yAxisEnd.y);
ctx.stroke();

// 3. Draw Graph P (Red)
const p_peak = toCanvas(1, 10);
const p_end = toCanvas(10, 0);

ctx.beginPath();
ctx.strokeStyle = 'red';
ctx.lineWidth = 3;
ctx.moveTo(origin.x, origin.y);
ctx.lineTo(p_peak.x, p_peak.y);
ctx.lineTo(p_end.x, p_end.y);
ctx.stroke();

// 4. Draw Graph Q (Black)
const q_peak = toCanvas(5, 10);
const q_end = toCanvas(10, 0);

ctx.beginPath();
ctx.strokeStyle = 'black';
ctx.lineWidth = 3;
ctx.moveTo(origin.x, origin.y);
ctx.lineTo(q_peak.x, q_peak.y);
ctx.lineTo(q_end.x, q_end.y);
ctx.stroke();

// 5. Draw Labels and Text
ctx.fillStyle = 'black';
ctx.font = '16px Arial';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';

// Axis labels
ctx.fillText('Time (s)', ox + graphWidth / 2, oy + 35);

ctx.save();
ctx.translate(ox - 50, oy - graphHeight / 2);
ctx.rotate(-Math.PI / 2);
ctx.fillText('acceleration (m/s²)', 0, 0);
ctx.restore();


// Ticks and values
ctx.font = '16px Arial';
ctx.textAlign = 'right';
ctx.textBaseline = 'middle';
const yTickPos = toCanvas(0, 10);
ctx.fillText('10', yTickPos.x - 8, yTickPos.y);

ctx.textAlign = 'center';
ctx.textBaseline = 'top';
const originLabelPos = toCanvas(0,0);
ctx.fillText('0', originLabelPos.x - 5, originLabelPos.y + 5);

const xTickPos = toCanvas(10, 0);
ctx.fillText('T', xTickPos.x, xTickPos.y + 8);


// Graph identifiers
ctx.font = 'bold 20px Arial';

// "P" label
ctx.fillStyle = 'red';
const p_label_pos = toCanvas(1.3, 8.5);
ctx.fillText('P', p_label_pos.x, p_label_pos.y);

// "Q" label
ctx.fillStyle = 'black';
const q_label_pos = toCanvas(2.5, 4);
ctx.fillText('Q', q_label_pos.x, q_label_pos.y);

</script>

</body>
</html>